<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		
		省
		<select>
			
			<option >河南省</option>
			<option >山东省</option>
			<option >河南省</option>
			<option >四川省</option>
			
		</select>
		
		市
		<select>
			
			<option >郑州</option>
			<option >洛阳</option>
			
		</select>
		
		
		区
		<select>
			<option >西城区</option>
			<option >东城区</option>
			<option >南城区</option>
			<option >北城区</option>
			
		</select>
		
		<script>
			
			
			// 1.为 省市区 三个select 标签绑定 下拉选择改变事件 onchange
			
			var selects = document.getElementsByTagName("select");
			
			
			var  province = selects[0];
			var  city = selects[1];   
			
			var area = selects[2];
			
			
			//this 对象在事件处理器 回调函数中的使用 ，this指的是发生事件的标签对象
			
			
			// 这 ，this 在JS 编程中出现的位置 总工 4 种，
			
			province.onchange = function(){
				
				
				
				//var index = province.selectedIndex; //被选中option的索引编号
				
				var index = this.selectedIndex;  //this指的就是province
				
				//var label = province.options[index].text;  //获取option的 文本内容
				
				// 
				var label = this.options[index].text;
				
				
				console.log(label)
				
				if(label == "山东省") {
					
					
					//获取所有山东省的 市 ,有可能通过接口从服务器获取
					var arr = ['济南市','青岛市','淄博市','潍坊市','菏泽','东营'];
					
					// 成为 select的 option 的子选项
					
					//city.innerHTML = '<option>济南市</option><option>青岛市</option><option>淄博市</option><option>潍坊市</option>';   //直接对innerHTML 赋值可以 把标签字符串渲染为 标签
					city.innerHTML = '';
					for(var i=0;i<arr.length;i++){
						
						city.innerHTML = city.innerHTML+'<option>'+arr[i]+'</option>'
					}
					
					// 然后过把 市 加到 select的 option 里面去
					
					var arrArea = ['历城区','槐荫区','西区'];
					
					area.innerHTML = '';
		
					for(var j=0;j<arrArea.length;j++){
						
						area.innerHTML = area.innerHTML+'<option>'+arrArea[j]+'</option>'
					}
					
					
				}else if(label=='河南省'){
					
					
					
				}else if(label=='四川省'){
					
					
				}
				
				
				
				//console.log("province.onchange")
			}
			
			
			city.onchange = function(){
				
			    
				
				var index = city.selectedIndex; //被选中option的索引编号
				
				var label = city.options[index].text;  //获取option的 文本内容
				
				console.log(label)
				
				if(label=="青岛市"){
					
					 // 然后过把
					 
					 var arrArea = ['市北区','市南区','李沧区'];
					 
					 area.innerHTML = '';
					 		
					 for(var j=0;j<arrArea.length;j++){
					 	
					 	area.innerHTML = area.innerHTML+'<option>'+arrArea[j]+'</option>'
					 } 
				}
				
				
				
				
			};
			
			
			
			// 2.要控制 select 下面的 option 选项 ，每个省，市份对应的option都不一样
			
			
			//3.对于省这个select 标签，我们知道选择的是哪一个option ，然后才能决定 市区 select 的option
			
			
			
			
			
			
			
		</script>
		
		
	</body>
</html>